<template>
	<!-- components/goods/index.wxml -->
	<view class="goods">
		<navigator :url="'/pages/goods/index?goods_id=' + info.goods_id" hover-class="none">
			<view class="goods__img-wrapper">
				<easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
					:image-src="info.goods_image" border-radius="36rpx 36rpx 0 0"></easy-loadimage>
				<view class="shadow"></view>
			</view>
			<view class="goods-info">
				<view class="goods__name col-accent">{{ info.goods_name }}</view>
				<view class="m-top20 dis-flex flex-y-center f-28 dy-height">
					<view :class="'goods__status ' + (info.new_goods_status.value == 2 ? 'disabled' : '')">
						{{ info.new_goods_status.text }}
					</view>
					<view v-if="0 == info.new_goods_status.value" class="count-down-wrapper">
						<!-- 发售倒计时 -->
						<!-- <count-down class="count-down-class" :serverTime="info.now_time"
							:startTime="info.sku_start_time" @finished="countdownFinished"></count-down> -->
					</view>
				</view>
				<view class="m-top20 dis-flex flex-y-center dy-height">
					<view class="global-limit">限量</view>
					<view class="global-limit-count">{{ info.show_total_stock_num }}份</view>
				</view>
				<view class="publisher m-top20 dis-flex flex-y-end dy-height">
					<view class="publisher__name">
						<text decode class="dy-iconfont icon-user">&nbsp;</text>
						{{ info.publisher_name }}
					</view>
				</view>
				<view v-if="showDetailBtn" class="btn-detail">{{info.min_goods_price}}</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import countDown from '@/components/count-down/index';
	// components/goods/index.js
	export default {
		components: {
			countDown
		},
		data() {
			return {};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			info: Object,
			scrollTop: {
				type: Number,
				default: 0
			},
			showDetailBtn: {
			  type: Boolean,
			  default: true
		    }
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			countdownFinished: function() {
				this.$emit('finished');
			}
		}
	};
</script>
<style lang="scss">
	@import '../../utils/iconfont-dy.css';
	/* components/goods/index.wxss */

	.col-accent {
		color: #101010 !important;
	}

	.col-6 {
		color: #666;
	}

	.col-f {
		color: $uni-text-color-inverse;
	}

	.f-28 {
		font-size: 28rpx;
	}

	.m-top20 {
		margin-top: 20rpx;
	}

	.dis-flex {
		display: flex !important;
	}

	.flex-box {
		flex: 1;
	}

	.flex-fixed {
		flex-shrink: 0;
	}

	.flex-y-center {
		align-items: center;
	}

	.flex-y-end {
		align-items: flex-end;
	}

	.dy-height {
		height: 40rpx;
	}

	.goods {
		position: relative;
		margin-bottom: 35rpx;
		background: #fff;
		border-radius: 36rpx;
	}

	.goods__img-wrapper {
		padding-bottom: 100%;
		position: relative;
	}

	.goods__img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.goods__img-wrapper .shadow {
		width: 100%;
		height: 100%;
		border-radius: 36rpx 36rpx 0 0;
		box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.65) inset;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.goods__name {
		height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
	}

	.goods-info {
		padding: 32rpx 20rpx;
		position: relative;
	}

	.btn-detail {
		font-weight: 600;
		width: 215rpx;
		height: 72rpx;
		background-color: #fff;
		box-sizing: border-box;
		border: 1px solid $uni-border-color-main;
		border-radius: 36rpx;
		text-align: center;
		font-size: 34rpx;
		color: $uni-border-color-main;
		line-height: calc(72rpx - 2px);
		position: absolute;
		right: 30rpx;
		bottom: 50rpx;
	}

	.goods__status {
		font-size: 34rpx;
		font-weight: bold;
		color: $uni-text-color-main;
	}

	.goods__status.disabled {
		font-size: 26rpx;
		color: $uni-text-color;
	}

	.global-limit {
		display: inline-block;
		height: 34rpx;
		background: #FEC786;
		padding: 0 16rpx;
		border-radius: 1px 0 0 1px;
		font-size: 22rpx;
		text-align: center;
		color: $uni-text-color;
		line-height: 34rpx;
		border-top-left-radius: 4px;
    	border-bottom-left-radius: 4px
	}

	.global-limit-count {
		display: inline-block;
		height: 34rpx;
		background: rgba(250, 240, 224, 0.5);
		padding: 0 16rpx;
		border-radius: 0 1px 1px 0;
		font-size: 22rpx;
		text-align: center;
		color: #000;
		line-height: 34rpx;
		border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px;
	}

	.count-down-wrapper {
		margin-left: 20rpx;
		padding-left: 20rpx;
		position: relative;
	}

	.count-down-wrapper:before {
		content: '';
		width: 1px;
		height: 22rpx;
		// background: #cccccc;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.count-down-class {
		font-size: 24rpx;
		color: #909299;
	}

	.publisher {
		margin-right: 230rpx;
	}

	.icon-user {
		font-size: 26rpx;
		color: #909299;
	}

	.publisher__name {
		font-size: 24rpx;
		color: #909299;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
